import React, { Component } from 'react'

/* 
    vue mixin 混入

    1.将一些可以重复使用的数据,函数或者钩子函数,封装在一个 混入中,
    2.在使用的时候,直接混入即可, mixins:[]


    react 高阶组件
    1.可以将一些重复使用的数组,函数等放在一个高阶组件中
    2.使用的时候,直接调用即可

*/




// ********高阶组件是一个纯函数,将一个组件作为参数,返回一个新的组件*******

const withFooter = (Com) => {

    // class Footer extends Component {
    //     render() {
    //         return (<>
    //             <Com></Com>
    //             <footer style={{ backgroundColor: '#f66', height: '50px' }}>页脚</footer>
    //         </>);
    //     }
    // }


    const Footer = () => {
        return (<>
            <Com></Com>
            <footer style={{ backgroundColor: '#f66', height: '50px' }}>页脚</footer>
        </>);
    }


    return Footer
}



// 高阶组件 
let Page1 = () => {
    return (<>
        <h1>page1 页面</h1>
    </>)
}

Page1 = withFooter(Page1)


// @withFooter() 装饰器的写法,现在 react 故意不支持装饰器
let Page2 = () => {
    return (<>
        <h1>page2 页面</h1>
    </>)
}

Page2 = withFooter(Page2)

export default class App extends Component {
    render() {
        return (<>
            <Page1></Page1>
            <hr />
            <hr />
            <hr />
            <Page2></Page2>
        </>)
    }
}
